• SASS 能夠透過變數、混合器 (mixin) 和循環來構建靈活的、可重複使用的網格系統。這樣的系統能夠根據不同的設置自動生成網格樣式，方便進行響應式設計

a. 步驟

• 定義一組變數來控制列數、間距和容器寬度
• 使用混合器來生成網格的樣式，如容器和列的設置
• 使用循環來自動生成列的寬度和其他樣式

b. 注意

• 避免過度複雜：過度使用循環和巢狀會增加編譯的複雜性，從而導致樣式表過於龐大或難以維護
• 保持彈性：確保網格系統具有足夠的靈活性，以適應不同銀幕尺寸和設計需求
• 性能問題：大量使用巢狀或重複程式碼生成的樣式表可能會影響網頁加載速度

c. 創建一個簡單的 12 列網格系統
// 定義基礎變數
$columns: 12; // 網格的總列數
$gutter-width: 20px; // 網格之間的間距
$container-width: 1200px; // 容器的總寬度

// 容器樣式
.container {
width: $container-width; // 設定容器的固定寬度
margin-left: auto; // 將容器置中
margin-right: auto; // 將容器置中
padding-left: $gutter-width / 2; // 為容器內添加內間距，防止網格緊貼邊緣
padding-right: $gutter-width / 2; // 同上，右側內間距
}

// 創建網格的列
@mixin column($col) {
width: (100% / $columns) * $col - $gutter-width; // 計算每列的寬度，並減去間距
float: left; // 使列水平排列
margin-right: $gutter-width; // 為每列添加右側間距
}

// 刪除最後一列的右側間距
.no-margin-right {
margin-right: 0; // 防止最後一列的間距超出容器
}

// 自動生成 12 列的樣式
@for $i from 1 through $columns {
.col-#{$i} {
@include column($i); // 使用混合器，為每個列生成對應的寬度
}
}

• $columns: 12;：定義網格的總列數，這裡設為 12 列。
• $gutter-width: 20px;：設定網格之間的間距 (gutter)，這裡每個列之間的空隙為 20px。
• $container-width: 1200px;：定義容器的總寬度，這裡設定為 1200px。
• .container { ... }：定義容器的樣式。
• width: $container-width;：設定容器的固定寬度。
• margin-left: auto; margin-right: auto;：使用 auto 將容器在頁面中水平置中。
• padding-left: $gutter-width / 2; 和 padding-right: $gutter-width / 2;：為容器內部的左右兩側添加一半的 gutter 寬度，以防止網格緊貼容器邊緣。
• @mixin column($col) { ... }：定義一個名為 column 的混合器，用來生成每列的寬度和樣式。
• width: (100% / $columns) * $col - $gutter-width;：這行計算列的寬度。首先將容器寬度平均分為 12 列，然後根據傳入的 $col 值乘以對應的比例，再減去間距寬度。
• float: left;：讓每個列水平排列。
• margin-right: $gutter-width;：在每列右側添加 gutter 間距。
• .no-margin-right { ... }：定義一個特殊的樣式，用來消除最後一列的右側間距，避免佈局錯誤。
• margin-right: 0;：移除最後一列的右側間距。
• @for $i from 1 through $columns { ... }：這是使用 @for 循環生成每列對應的類別名稱和樣式。
• .col-#{$i} { ... }：動態生成類名，如 .col-1, .col-2, .col-3，直到 .col-12。
• @include column($i);：將 column 混合器應用到每個列，並傳入當前循環的值 $i，自動計算對應列的寬度

編譯後的CSS
.container {
width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}

.col-1 {
width: 80px;
float: left;
margin-right: 20px;
}

.col-2 {
width: 180px;
float: left;
margin-right: 20px;
}

/* ...其他列繼續... */
.no-margin-right {
margin-right: 0;
}

• 這個網格系統生成了 .col-1 到 .col-12 的類別，對應不同寬度的列，可以用來輕鬆建立靈活的佈局